<style lang="scss" scoped>
    .table-filter {
        border-radius: 4px;
        border: 1px solid #DCDFE6;

        /deep/ .el-input__inner {
            border: none;
        }

        /deep/ .el-select {
            max-width: 150px;
            border-right: 1px solid #DCDFE6;
        }
    }
</style>
<template>
    <div class="ui flex table-filter">
        <el-select :size="size" v-model="select" multiple collapse-tags placeholder="筛选条件">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <div class="item one">
            <el-input placeholder="请输入内容" v-model="searchText" :size="size" @keyup.enter.native="innerSearch">
                <i slot="suffix"
                    class="el-icon-search"
                    style="position: absolute;top: 10px;right: 1px; cursor:pointer"
                    @click="innerSearch"></i>
            </el-input>
        </div>
    </div>
</template>
<script>
    import { debounce } from 'lodash'

    export default {
        name: 'ui-table-filter',
        data() {
            return {
                select: [],
                searchText: '',
                cache: null,
                tableData: null,
                options: [],
                isSearch: false
            }
        },
        props: {
            value: {
                type: Array
            },
            size: {
                type: String,
                default: 'small'
            },
            selOptions: {
                type: Array
            }
        },
        watch: {
            searchText() {
                this.innerSearch()
            },
            value: {
                handler(data) {
                    if (!this.isSearch && data && data.length > 0) {
                        // 缓存tabeData数据
                        this.cache = this.value

                        // 如果没有设置筛选条件就默认把tabeData键值当作筛选项
                        if (this.selOptions) {
                            this.options = this.selOptions
                        }else{
                            for (let key in this.value[0]) {
                                this.options.push({
                                    value: key,
                                    label: key
                                })
                            }
                        }
                    }
                },
                immediate: true,
                deep: true
            }
        }
        ,
        methods: {
            innerSearch: debounce(function() {
                this.isSearch = true
                if (this.cache) {
                    this.tableData = this.cache
                    if (this.select.length > 0) {
                        this.tableData = this.tableData.filter((data) => {
                            for (let i = 0, len = this.select.length; i < len; i++) {
                                if (data[this.select[i]].toLowerCase().includes(this.searchText.toString().toLowerCase())) {
                                    return true
                                }
                            }

                        })
                        this.$emit('input', this.tableData)
                    }else{
                        this.$message('请先选择筛选条件！')
                    }

                    this.$nextTick(() => {
                        this.isSearch = false
                    })

                }
            }, 400),
            search(selects, txt) {   // 给外部调用search方法
                if (selects && txt) {
                    if (selects instanceof Array) {
                        this.select = selects
                    }else{
                        this.select = [selects]
                    }
                    this.searchText = txt
                }
            }
        }
    }
</script>


